import { useEffect, useRef, useState } from "react"
import lessModule from "./index.module.less"
import HomePage_ModalComponent_HeaderNormalComponent from "../../../../../../component/modal/component/headerNormal"
import HomePage_ModalComponent_NormalFooterComponent from "../../../../../../component/modal/component/normalFooter"
import L, { LatLngExpression, marker } from 'leaflet';
import HomePage_ModalComponent_NormalFormComponent from "../../../../../../component/modal/component/normalForm"
import { FormInstance } from "antd/lib"
import { $eventBus, $EventBus_off, $EventBus_on, $selectOptionData } from "../../../../../../../../common/utils";
import { Form, message, Radio, RadioChangeEvent } from "antd";
import { $Http } from "../../../../../../../../network";
import HomePage_ModalComponent_SelectMonitorModalComponent from "../../../../../../component/modal/component/selectMonitorModal";

// 主页-数据维护页面-站点维护页面-站点弹窗组件组件
interface homePageDataMaintenancePageMaintenanceTestingEquipmentMaintenancePageAddModalComponentInterface {
    sourceData: object
    change_cancel: Function
}
const HomePage_DataMaintenancePage_MaintenanceTestingEquipmentMaintenancePage_AddModalComponent: React.FC<homePageDataMaintenancePageMaintenanceTestingEquipmentMaintenancePageAddModalComponentInterface> = (props) => {

    const [form] = Form.useForm()
    const [monitoringType, setMonitoringType] = useState<string>("主变")
    const [connecSiteIdx, setConnecSiteIdx] = useState<number>(0)
    const paramsData = useRef<object>({})
    const stationID = useRef<number>(0)
    const [selectOtherData, setSelectOtherData] = useState<object>([])
    const [isMonitoringTypeError, setIsMonitoringTypeError] = useState<boolean>(false)
    const formItemList = [
        {
            label: "设备ID",
            key: "deviceID",
            type: "input",
            placeholder: "请输入",
            isRequire: true,

        },
        {
            label: "通信地址",
            key: "mailingAddress",
            type: "input",
            placeholder: "请输入",
            isRequire: true,
        },
    ]
    const change_monitoringType = (e: RadioChangeEvent) => {
        paramsData.current = {}
        setMonitoringType(e["target"]["value"])
    }
    const change_connecSiteIdx = (e: RadioChangeEvent) => {
        setConnecSiteIdx(e["target"]["value"])
    }
    const change_selectedOtherList = (list: Array<object>) => {
        stationID.current =  monitoringType === "线路" ?  list[0]["connecSite"]?.[connecSiteIdx]  : list[0]["stationID"]
        paramsData.current["typeID"] = list[0]["id"]
        paramsData.current["monitoringType"] = monitoringType
        setIsMonitoringTypeError(false)
        setSelectOtherData({ ...list[0] })
    }

    // 广播函数数据
    const eventBusFuncData = {
        // 提交操作
        submitOperation: (data: object) => {
            setIsMonitoringTypeError(!Object.keys(paramsData.current).length)
            form.validateFields().then((data) => {
                Object.keys(paramsData.current).length && $Http("create", { typeName: "数据维护/监测设备维护", ...data, ...paramsData.current, stationID: stationID.current}).then((res) => {
                    message.success(res["success"])
                    props.change_cancel(true)
                })
            })
        }
    }

    useEffect(() => {
        $EventBus_on(eventBusFuncData)

        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])

    return (
        <div className={lessModule["homePageDataMaintenancePageMaintenanceTestingEquipmentMaintenancePageAddModalComponent"]}>
            <HomePage_ModalComponent_HeaderNormalComponent name={"新增设备"} padding="15px 24px" change_cancel={props.change_cancel} />
            <main className={lessModule["homePageDataMaintenancePageMaintenanceTestingEquipmentMaintenancePageAddModalComponent-main"]}>
                <div className={lessModule["homePageDataMaintenancePageMaintenanceTestingEquipmentMaintenancePageAddModalComponent-title"]}>设备信息</div>
                <HomePage_ModalComponent_NormalFormComponent form={form} type={props.sourceData["type"]} formItemList={formItemList} sourceData={props.sourceData} />
                <div className={lessModule["homePageDataMaintenancePageMaintenanceTestingEquipmentMaintenancePageAddModalComponent-title"]}>
                    <span>请选择监测对象</span>
                    {
                        isMonitoringTypeError && <div className="homePage-required">请选择</div>
                    }
                </div>
                <Radio.Group
                    value={monitoringType}
                    options={[
                        {
                            value: "主变",
                            label: "主变",
                        },
                        {
                            value: "线路",
                            label: "线路",
                        },

                    ]}
                    onChange={change_monitoringType}
                />
                <HomePage_ModalComponent_SelectMonitorModalComponent isCard operation="安装" monitoringType={monitoringType} mode="single" change_selectedOtherList={change_selectedOtherList} />
            </main>
            {
                monitoringType === "线路" && !!Object.keys(paramsData.current).length && <div className={lessModule["homePageDataMaintenancePageMaintenanceTestingEquipmentMaintenancePageAddModalComponent-station"]}>
                    <div className={lessModule["homePageDataMaintenancePageMaintenanceTestingEquipmentMaintenancePageAddModalComponent-title"]}>设备安装站点</div>
                    <Radio.Group
                        value={connecSiteIdx}
                        options={selectOtherData["connecSiteName"]?.map((item: string, idx: number) => { return { label: item, value: idx } })}
                        onChange={change_connecSiteIdx}
                    />
                </div>
            }
            <HomePage_ModalComponent_NormalFooterComponent change_cancel={props.change_cancel} />
        </div>
    )
}
export default HomePage_DataMaintenancePage_MaintenanceTestingEquipmentMaintenancePage_AddModalComponent